<style include="settings-shared">
  :host {
    --justify-margin: 8px;
    align-items: center;
    display: flex;
  }

  :host([enforced_]) {
    /* Disable pointer events for this whole element, as outer on-click gets
     * triggered when clicking anywhere in :host. */
    pointer-events: none;
  }

  cr-policy-pref-indicator {
    /* Enable pointer events for the indicator so :hover works. Disable
     * clicks via onIndicatorClick_ so outer on-click doesn't trigger. */
    pointer-events: all;
  }

  :host(:not([end-justified])) cr-policy-pref-indicator {
    margin-inline-start: var(--cr-controlled-by-spacing);
  }

  :host([end-justified]) cr-policy-pref-indicator {
    margin-inline-end: var(--cr-controlled-by-spacing);
    margin-inline-start: calc(
        var(--cr-controlled-by-spacing) - var(--justify-margin));
    order: -1;
  }
</style>

<cr-button class$="[[actionClass_]]"
  disabled="[[!buttonEnabled_(enforced_, disabled)]]">
  [[label]]
</cr-button>

<template is="dom-if" if="[[hasPrefPolicyIndicator(pref.*)]]" restamp>
  <cr-policy-pref-indicator pref="[[pref]]" on-click="onIndicatorClick_"
      icon-aria-label="[[label]]">
  </cr-policy-pref-indicator>
</template>
